%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%  本作品由Du Wenliang版权所有。                                      %%
%%  根据Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License授权。%%
%%  您可访问 http://creativecommons.org/licenses/by-nc-sa/4.0/ 查看许可条款。                  %%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\newcommand{\devtoolFigs}{../Web_Common/Figs}


% -------------------------------------------
% 子节
% ------------------------------------------- 
\subsection{使用“HTTP Header Live”附加组件检查HTTP标头}
\label{web:sec:httpheaderlive}

我们的Ubuntu 16.04虚拟机中的Firefox版本（60）不支持在Ubuntu 12.04虚拟机中使用的LiveHTTPHeader附加组件。取而代之的是，使用一个名为“HTTP Header Live”的新附加组件。启用和使用此附加组件工具的步骤如图~\ref{web:fig:httpheader}所示。只需点击标记为$\ding{192}$的图标；左侧会出现一个侧边栏。确保在位置$\ding{193}$选择了“HTTP Header Live”。然后点击网页中的任何链接，所有触发的HTTP请求都将被捕获并在标记得分$\ding{194}$的侧边栏区域中显示。如果单击任何HTTP请求，则会弹出一个窗口以显示所选的HTTP请求。不幸的是，该附加组件工具仍处于开发阶段；除非更改其大小，在弹出窗口后不会有任何内容显示（似乎当窗口弹出时不会自动触发重绘，但更改其大小将触发重绘）。

\begin{figure}[htb]
\begin{center}
\includegraphics[width=0.85\textwidth]{\devtoolFigs/HTTPHeaderLive.pdf}
\end{center}
\caption{启用HTTP Header Live附加组件}
\label{web:fig:httpheader}
\end{figure}

% -------------------------------------------
% 子节
% ------------------------------------------- 
\subsection{使用Web开发者工具检查HTTP标头}
\label{web:sec:web_dev_tools}

Firefox提供了一个可以用来检查HTTP标头的另一个非常有用的工具。该工具是Web开发者网络工具。在本节中，我们将介绍该工具有些重要的功能。Web开发者网络工具可以通过以下导航启用：

\begin{lstlisting}
点击Firefox右上角菜单 --> Web开发者 --> 网络
或者
点击“工具”菜单 --> Web开发者 --> 网络 
\end{lstlisting}

我们以Elgg的用户登录页面为例。图~\ref{fig:webdevtools_01_request}展示了网络工具有关登录所使用的HTTP POST请求。

\begin{figure}[htb]
\begin{center}
\includegraphics[width=0.8\textwidth]{\devtoolFigs/webdevtools_01_request.png}
\end{center}
\caption{Web开发者网络工具中的HTTP请求}
\label{fig:webdevtools_01_request}
\end{figure}

要查看请求的详细信息，可以点击一个特定的HTTP请求，该工具有两个分栏（见图~\ref{fig:webdevtools_02_two_panes}）来显示信息。

\begin{figure}[htb]
\begin{center}
    \includegraphics[width=0.95\textwidth]{\devtoolFigs/webdevtools_02_two_panes.png}
\end{center}
\caption{分栏中的HTTP请求和请求详细信息}
\label{fig:webdevtools_02_two_panes}
\end{figure}

选中请求的详细信息将在右分栏中显示。图~\ref{fig:webdevtools_03_post_headers}展示了登录请求在Headers标签页下的详细信息（包括URL、请求方法和Cookie）。可以在右侧分栏查看请求和响应头。要检查HTTP请求中的参数，可以使用Params标签。图~\ref{fig:webdevtools_03_post_params}显示了发送到Elgg的登录请求的参数，包括username和password。该工具也可以以与POST请求相同的方式检查HTTP GET请求。

\begin{figure}[htb]
 \centering
 \subfigure[HTTP请求头]{
        \includegraphics[width=0.6\textwidth]{\devtoolFigs/webdevtools_03-1.png}
        \label{fig:webdevtools_03_post_headers}
 }
 \subfigure[HTTP请求参数]{
        \includegraphics[width=0.35\textwidth]{\devtoolFigs/webdevtools_03-2.png}
        \label{fig:webdevtools_03_post_params}
 }
 \caption{HTTP头和参数}
\end{figure}

\paragraph{字体大小。} Web开发者工具窗口的默认字体大小非常小，可以通过将焦点放在网络工具有关窗口上的任何地方并使用Ctrl+加号键来增加。

% -------------------------------------------
% 子节
% ------------------------------------------- 
\subsection{JavaScript调试}
\label{web:sec:jsdebugging}

我们还需要调试我们的JavaScript代码。Firefox的开发者工具也可以帮助调试JavaScript代码，它能引导我们找到错误发生的确切位置。以下说明显示了如何启用此调试工具：

\begin{lstlisting}
点击“工具”菜单 --> Web开发者 --> Web控制台
或者使用Shift+Ctrl+K快捷键。
\end{lstlisting}

一旦进入Web控制台，点击JS标签。然后点击JS旁边下拉箭头，并确保在Error旁边有勾选标记。如果您还对警告消息感兴趣，则点击Warning。请参见图~\ref{devtool:fig:errocheckmark}。

\begin{figure}[htb]
\begin{center}
  \includegraphics[width=0.4\textwidth]{\devtoolFigs/errorCheckMark.png}
\end{center}
\caption{调试JavaScript代码（1）}
\label{devtool:fig:errocheckmark}
\end{figure}

如果代码中存在错误，控制台将显示一条消息。导致错误的行在错误消息右侧出现。点击行号，您会被带到包含错误的确切位置。
请参见图~\ref{devtool:fig:console}。

\begin{figure}[htb]
\begin{center}
  \includegraphics[width=1.0\textwidth]{\devtoolFigs/consoleError2.png}
\end{center}
\caption{调试JavaScript代码（2）}
\label{devtool:fig:console}
\end{figure}